<template>
  <el-scrollbar style="height: 100%" class="opration-container">
    <div class="opration">
      <div class="oprationLeft">
        <bs-add-drop-down
          :items="addItems"
          @click="addDropClick"
          v-has="'MEDIA_MEDIA_SAVE'"
        ></bs-add-drop-down>
        <bs-delete-button-icon
          @click.native="deleteClick"
          v-has="'MEDIA_MEDIA_DELETE'"
        ></bs-delete-button-icon>
        <bs-edit-button-icon
          @click.native="editClick"
          v-has="'MEDIA_MEDIA_UPDATE'"
        ></bs-edit-button-icon>
        <bs-action-drop-down
          :items="actionItems"
          @click="actionDropClick"
        ></bs-action-drop-down>
        <bs-upload-button-icon
          :text="$t('文件上传')"
          @click.native="uploadClick"
          v-has="'MEDIA_MEDIA_SAVE'"
        ></bs-upload-button-icon>
        <bs-refresh-button-icon
          @click.native="refreshClick"
        ></bs-refresh-button-icon>
      </div>
      <div class="oprationRight">
        <el-form
          hide-required-asterisk
          :inline="true"
          size="small"
          :model="searchForm"
        >
          <el-form-item>
            <el-select
              v-model="searchForm.name"
              :placeholder="$t('全部选项')"
              clearable
              style="width: 95px"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('请输入关键词搜索')"
              v-model="searchForm.value"
              clearable
              style="width: 160px"
            >
              <template slot="prepend">
                <i class="iconfont icon-sousuo" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon @click.native="searchClick"></bs-search-button-icon>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
export default {
  name: 'ConditionRow',
  data() {
    return {
      searchForm: {
        name: 0,
        value: '',
      },
      searchItemData: [
        { name: '全部选项', value: 0 },
        { name: '名称', value: 1 },
        { name: '类型', value: 2 },
        // { name: '状态', value: 3 },
        { name: '有效性', value: 4 },
      ],
      showItem: '',
      addItems: [
        '本地文本',
        '二维码',
        // 'Rss频道',
        '网络图片',
        '网络文本',
        '流媒体',
        // '网络金融图片',
        // '网络金融文本',
        'DVB频道',
        // '网页截图',
        '文件夹',
      ],
      actionItems: [
        // '上传',
        '下载',
        '预览',
      ],
    }
  },
  components: {},
  methods: {
    addDropClick(item) {
      this.addItems.indexOf(item) !== -1 && this.$emit('add', item)
    },
    actionDropClick(item) {
      this.actionItems.indexOf(item) !== -1 && this.$emit('action', item)
    },
    deleteClick() {
      this.$emit('del')
    },
    editClick() {
      this.$emit('edit')
    },
    refreshClick() {
      this.searchForm = {
        name: 0,
        value: '',
      }
      this.$emit('search', this.searchForm)
    },
    uploadClick() {
      this.$emit('action', '上传')
    },
    searchClick() {
      if (this.searchForm.name > 0) {
        this.$emit('search', this.searchForm)
      } else {
        this.$emit('search', {
          name: 0,
          value: this.searchForm.value,
        })
      }
    },
  },
}
</script>